<template>
	<view class="myselfAll">
		<view class="top">
			<image :src="user==null?'../../static/defaultAvatar.png'
			:user.avatarUrl" class="avatar"/>
			<text class="name" @click="loginOrEdit">{{user==null?"待登入":user.name}}</text>
			<text class="myselfPage" @click="toMyselfPage" v-if="user!=null">我的主页></text>
			<view class="top-grids">
				<view class="fans" @click="toMyFans">
					<text style="font-weight: bold;">粉丝</text><br/>
					<text>{{user==null?"待登入":user.fans}}</text>
				</view>
				<view class="care" @click="toMyCare">
					<text style="font-weight: bold;">关注</text><br/>
					<text>{{user==null?"待登入":user.care}}</text>
				</view>
				<view class="collect" @click="toMyCollect">
					<text style="font-weight: bold;">收藏</text><br/>
					<text>{{user==null?"待登入":user.collect}}</text>
				</view>
				<view class="money" @click="toMyWallet">
					<text style="font-weight: bold;">大学币</text><br/>
					<text>{{user==null?"待登入":user.money}}</text>
				</view>
			</view>
		</view>
		<view class="charge-card"><!--充值卡片-->
			<view class="tip">升级至vip，获得更多功能！</view>
			<view class="little-tip">首充享受8折优惠</view>
			<button class="toUp" size="mini">去升级</button>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {
				user:null
			}
		},
		onShow() {
			uni.getStorage({
				key:"user",
				success: (res) => {
					this.user=res.data
				},
				fail: () => {
					this.user=null
				}
			})
		},
		methods: {
			loginOrEdit(){
				if(this.user==null){
					uni.showToast({
						title:"跳转至登入",
						icon:"none",
						position:"top"
					})
					uni.navigateTo({
						url:'/pages/aboutMyself/login'
					})
				} else {
					uni.navigateTo({
						url:"/pages/aboutMyself/edit",
					})
				}
			},
			toMyselfPage(){
				uni.navigateTo({
					url:'/pages/aboutMyself/edit'
				})
			},
			toMyFans(){
				if(this.user==null){
					uni.showToast({
						title:"请先登入",
						icon:"none",
						position:'top'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/aboutMyself/myFans'
				})
			},
			toMyCare(){
				if(this.user==null){
					uni.showToast({
						title:"请先登入",
						icon:"none",
						position:'top'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/aboutMyself/myCare'
				})
			},
			toMyCollect(){
				if(this.user==null){
					uni.showToast({
						title:"请先登入",
						icon:"none",
						position:'top'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/aboutMyself/myCollect'
				})
			},
			toMyWallet(){
				if(this.user==null){
					uni.showToast({
						title:"请先登入",
						icon:"none",
						position:'top'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/aboutMyself/myWallet'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	.myselfAll{
		width: 100%;
		min-height: 100vh;
		background-color: whitesmoke;
		.top{
			position: relative;
			width: 100vw;
			height: 20vh;
			min-height: 20vw;
			background: linear-gradient(to bottom, rgb(107, 175, 240), rgb(245, 137, 227));
			border-bottom: 1px solid gray;
			.avatar{
				position: absolute;
				top: 10px;
				left: 10px;
				width: 15vw;
				max-width: 10vh;
				height: 15vw;
				max-height: 10vh;
			}
			.name{
				position: absolute;
				font-size: 15px;
				font-weight: bold;
				top: 10px;
				left: calc(20px + 15vw);
			}
			.myselfPage{
				position: absolute;
				font-size: smaller;
				top: 5vh;
				right: 5vw;
			}
			.top-grids{
				position: absolute;
				width: 100vw;
				height: 10vh;
				top: 10vh;
				view{
					width: 25vw;
					padding-top: 1px;
					text-align: center;
					float: left;
				}
			}
		}
		.charge-card{
			position: relative;
			width: 90vw;
			height: 10vh;
			min-height: 2rem;
			margin-left: 5vw;
			margin-top: 5px;
			border-radius: 5px;
			background-color: deepskyblue;
			.tip{
				padding-top: 0.5rem;
				margin-left: 1rem;
				font-size: 1rem;
				color: yellow;
				font-family: fantasy;
			}
			.little-tip{
				margin-left: 1rem;
				font-size: 0.7rem;
				color: yellow;
				font-family: fantasy;
			}
			.toUp{
				position: absolute;
				right: 5px;
				top: calc(5vh - 0.75rem);
				height: 1.5rem;
				border-radius: 15px;
				background-color: yellow;
			}
			.toUp:active{
				opacity: 0.95;
			}
		}
	}
</style>